<template>
    <div id="vue-projects-board">
        <div class="card">
            <!-- header -->
            <div class="card-header">
                <h2>{{'common.my_projects' | lang }}
                    <small>{{'common.my_projects_desc' | lang}}</small>
                </h2>
            </div>
            <projects-grid  :columns="columns"
                            :data="projects"
                            table-id="projects-grid"
            ></projects-grid>
        </div>
    </div>
</template>

<script>
    import projectsGrid from '../components/project/projectsGrid.vue';
    export default {
        components:{ projectsGrid },
        data() {
            // projects is a global js veriable setted by back-end
            let columns = [
                            'ID',
                            'name',
                            'project_no',
                            'desc',
                            'customer_leader',
                            'customer_name',
                            'end_date',
                            'engineer_leader',
                            'level',
                            'project_leader',
                            'quality_leader',
                            'real_end_date',
                            'start_date',
                            'status',
                            'target_fob',
                            'target_fob_currency'
                            ];



            return {
                projects,
                columns
            }
        },
        ready() {
            
        }

    }
</script>